<template>
  <div class="line-left"></div>
</template>

<script>
export default {
  data() {
    return {
      myChart: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    init() {
      const yearData = [
        {
          year: '2020', // 年份
          data: [
            // 两个数组是因为有两条线
            [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
          ],
        },
        {
          year: '2021', // 年份
          data: [
            // 两个数组是因为有两条线
            [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
            [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34],
          ],
        },
      ];
      // 1实例化对象
      this.myChart = this.$echarts.init(this.$el);
      // 2. 指定配置项和数据
      const option = {
        // 通过这个color修改两条线的颜色
        color: ['#00f2f1', '#ed3f35'],
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          // 如果series 对象有name 值，则 legend可以不用写data
          // 修改图例组件 文字颜色
          textStyle: {
            color: '#4c9bfd',
          },
          // 这个10% 必须加引号
          right: '10%',
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          show: true, // 显示边框
          borderColor: '#012f4a', // 边框颜色
          containLabel: true, // 包含刻度文字在内
        },

        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月',
          ],
          axisTick: {
            show: false, // 去除刻度线
          },
          axisLabel: {
            color: '#4c9bfd', // 文本颜色
          },
          axisLine: {
            show: false, // 去除轴线
          },
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false, // 去除刻度线
          },
          axisLabel: {
            color: '#4c9bfd', // 文本颜色
          },
          axisLine: {
            show: false, // 去除轴线
          },
          splitLine: {
            lineStyle: {
              color: '#012f4a', // 分割线颜色
            },
          },
        },
        series: [
          {
            name: '入组',
            type: 'line',
            // true 可以让我们的折线显示带有弧度
            smooth: true,
            data: yearData[0].data[0],
          },
          {
            name: '未入组',
            type: 'line',
            smooth: true,
            data: yearData[0].data[1],
          },
        ],
      };
      // 3. 把配置项给实例对象
      this.myChart.setOption(option);
      //4.让图表跟随屏幕自动的去适应
      window.addEventListener('resize', () => {
        this.myChart.resize();
      });
    },
  },
};
</script>

<style lang="css" scoped>
.line-left {
  height: 100%;
}
</style>
